import React from 'react';
import {useHistory} from 'react-router-dom'
// import tx from '@a/images/mine/touxiang3x.png'
import pt from '@a/images/mine/putong2x.png'
import kjxz from '@a/images/mine/kjxz2x.png'
import myclass from '@a/images/mine/myclass2x.png'
import play from '@a/images/mine/play2x.png'
import {
  MyifoWrap
} from './StyledMine'

const Myifo = (props) => {
  let history = useHistory()
  // console.log(props.id)
  var obj = JSON.parse(sessionStorage.username)
  // console.log(obj.id)
  return (
    <MyifoWrap>
      <div>
        <div>
          <div className="shang">
            <div className='touxiang'
              onClick={() => {history.push('/personalinfo')}}
            >
              <div className="imgs"><img src={obj.img} alt=""/></div>
              <div><h1>{obj.name}</h1><p>ID:{`${obj.id}`}&nbsp;&nbsp;未认证@</p></div>
            </div>
            <div className="xuz"><img src={`${pt}`} alt=""/></div>
          </div>
          <div className="dengji"
           onClick={()=> { history.push('/level') }}
          >
              <div className='bar'>
                <div></div>
                <span>升级0/1</span>
              </div>
              <div>
                <p>升等级</p>
                <p>享权益</p>
              </div>
            </div>
        </div>
      </div>
      <ul>
        <li>
          <div>
            <div>
            <img src={`${kjxz}`}alt=""/>
            </div>
            <span>下载课件</span>
          </div>
        </li>
        <li>
          <div>
            <div>
            <img src={`${play}`} alt=""/>
            </div>
            <span>师训讲堂</span>
          </div>
        </li>
        <li>
          <div>
            <div>
            <img src={`${myclass}`}alt=""/>
            </div>
            <span>我的班级</span>
          </div>
        </li>
      </ul>
    </MyifoWrap>
  );
}


export default Myifo